@import "../../assets/scss/variables";
@import "../../assets/scss/mixin";
.container {
  height: 100%;
  display: flex;
  flex-direction: column;
  &-wrapper{
    height: 100%;
    padding: 0 $padding-base;
  }
  &-list{
    height: 100%;
    overflow: auto;
    padding:$padding-base $padding-small 0;
    &-item{
      background-color: $content-background-color;
      border-radius: $border-radius-large;
      margin-bottom: $padding-base;
      padding: $padding-medium 0 $padding-base;
    }
    &-header{
      display: flex;
      align-items: center;
      padding: 0 $padding-large;
      &-content{
        flex:1;
        display: flex;
        align-items: center;
        color: $color-white;
        &-icon{
          margin-right: $padding-base;
          font-size: 50rpx;
          color: $color-primary;
        }
        &-text{
          &-title{
            font-size: $font-size-base;
          }
          &-desc{
            font-size: $font-size-mini;
          }
        }
      }
      &-action{
        &-icon{
          font-size: 40rpx;
          color: $color-white;
        }
      }
    }
    &-footer{
      display: flex;
      justify-content: space-around;
      align-items: center;
      margin-top: $padding-large;
      &-action{
        width: 80rpx;
        height: 80rpx;
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: $color-primary;
        border-radius: 50%;
        &-icon{
          font-size: 50rpx;
          color: #020308;
        }
      }
    }
  }
  &-action{
    width: 100rpx;
    height: 100rpx;
    border-radius: 50%;
    background-color: #07b3e3;
    position: absolute;
    right: 50rpx;
    bottom: 130rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    &-icon{
      font-size: 60rpx;
      color: $color-white;
    }
  }
}
